<input id="toggleChecker" type="checkbox">
<label id="togglerLable" for="toggleChecker">
  <div class="checkboxtoggler">
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
  </div>
</label>
<style>
/* From Uiverse.io by AKAspidey01 - Tags: checkbox, toggle switch, menuicon */
.checkboxtoggler {
  width: 3em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  cursor: pointer;
}

.line-1 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-2 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-3 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

#toggleChecker {
  height: 3em;
  width: 100%;
  display: none;
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {
  -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {
  -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  transform: rotate(-45deg) translateY(0em) translateX(0.1em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {
  transform: scaleX(0);
  transform-origin: left;
}
</style>
